i<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            :title="form.id?'编辑':'添加'"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="50%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName=""
            @cancel="closeVisible"
            >
            <template slot="footer" style="text-align:center;">
                <a-button @click="closeVisible">
                    取消
                </a-button>
                <a-button class="blue-btn" @click="onSubmit">
                    提交
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                class="form-model-addAndEdit"
            >
                <a-form-model-item label="缴费人员" prop="fjfry">
                    <a-input :min="1" v-model="form.fjfry" @click="checkMan('fsqrxm',form.fjfry,form.fuserid)"/>
                </a-form-model-item>
                <a-form-model-item label="应缴金额" prop="fyjje">
                    <a-input-number :min="1" v-model="form.fyjje" style="width:100%"/>
                </a-form-model-item>
                <a-form-model-item label="缴费方式" prop="fjffs">
                    <a-select v-model="form.fjffs" style="width:100%">
                        <a-select-option value="线上">
                            线上
                        </a-select-option>
                        <a-select-option value="线下">
                            线下
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="应缴时间" prop="fyjsj">
                    <a-date-picker v-model="form.fyjsj" @change="timeChange($event,'fyjsj')" style="width:100%"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <personnelList ref="personnelListRef" :modaObj="modaObj" :radioCheck="true" @checkPersonnel="checkPersonnel"></personnelList>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import { saveDfjl } from './service/index'
import personnelList from '../../administrativeOffice-new/modal/personnelList.vue'
import moment from 'moment'
export default {
    props:{
        passObj:{
            type:[Array,Object],
            default: () => {},
            required:false
        },
    },
    components:{
        compSelector,personnelList
    },
    data() {
        return {
            moment:moment,
            handleModalVisible: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            form: {
                fgzjlid: "",
                fjffs: "",
                fjfjsgs: "",
                fjfry: "",
                fjfsj: "",
                fjfzt: "",
                fsjje: "",
                fuserid: "",
                fyjje: "",
                fyjsj: "",
                id: "",
            },
            kongForm: {},
            rules: {
                fjfry: [{ required: true, message: '请选择项缴费人员', trigger: 'blur' }],
                fyjje: [{ required: true, message: '请输入应缴金额', trigger: 'blur' }],
                fjffs: [{ required: true, message: '请选择缴费方式', trigger: 'change' }],
                fyjsj: [{ required: true, message: '请输入应缴时间', trigger: 'change' }],
            },
            dlList: [],
            xlList: [],
            modaObj: {},
        }
    },
    created() {
        this.kongForm = JSON.parse(JSON.stringify(this.form))
    },
    watch: {
        passObj(newval,oldVal){
            //console.log(newval)
            if(newval.id){
                this.form = newval
            }
        },
    },
    methods: {
        // 右上角关闭后的回调
        closeVisible(e){
            this.$emit('success')
            this.handleModalVisible = false
            this.form = {...this.kongForm}
        },
        timeChange(val,name){
            let data = this.form
            data[name] = val == null?null:moment(val).format('YYYY-MM-DD')
        },
        checkMan(place,man,id){
            this.$nextTick(_ => {
                this.modaObj = {place: place,oldId:id==''?'':id.split(',')}
                this.$refs.personnelListRef.personnelListVisible = true
            })
        },
        // 选择人员
        checkPersonnel(place,id,name){
            //console.log(place,id,name)
            this.$refs.personnelListRef.personnelListVisible = false
            const data = this.form
            this.fjfry = ''
           this.fuserid = ''
            //console.log(this.form)
            data['fjfry'] = name.toString()
            data['fuserid'] = id.toString()
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let data = this.form
                    saveDfjl(data).then(res => {
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.closeVisible()
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                } else {
                //console.log('error submit!!');
                return false;
                }
            });
        },
    },
}
</script>
<style lang="less" scoped>
.form-model-addAndEdit{
    .ant-form-item {
        .ant-form-item-label{
            width: 180px !important;
        }
        .ant-form-item-control-wrapper{
            width: 180px !important;
            .ant-form-item-control {}
        }
    }
    .formModel-item-input {
        width: 100%;
    }
}
</style>
